/**
 * useReducer(减少组件层级)
 */
 import React, {useContext, useReducer } from 'react';
 const intialState={
     num1:"666",
     num2:"碰磕"
 }
 const reducer=(state,action)=>{
    let newarr={...state};
    switch(action.msg){
        case "change-num1":
            newarr.num1=action.value
            return newarr
        case "change-num2":
            newarr.num2=action.value
            return newarr
        default:
            return newarr
    }
 }
 const GlobalContext = React.createContext();
 export default function MyReducer2() {
    const [state,dispatch]=useReducer(reducer,intialState)
    return (
        <GlobalContext.Provider value={
            {
                state,dispatch
            }
        }>
        <div>
           <Children1 />
           <Children2 />
           <Children3 />
        </div>   
        </GlobalContext.Provider>
    )
 }
function Children1(){
    const {dispatch}=useContext(GlobalContext)//这里传值
    return <div style={{background:"red"}}>
        <button onClick={()=>{
            dispatch({
                msg:"change-num1",
                value:"被我修改了num1哈哈哈"
            })
        }}>改变值1</button>
        <button onClick={()=>{
            dispatch({
                msg:"change-num2",
                value:"被我修改了num2哈哈哈"
            })
        }}>改变值2</button>
    </div>
}
function Children2(){
    const {state}=useContext(GlobalContext)//拿到值
    return <div style={{background:"orange"}}>Children2---{state.num1}</div>
}
function Children3(){
    const {state}=useContext(GlobalContext)//拿到值
    return <div style={{background:"skyblue"}}>Children3---{state.num2}</div>
}